import Back from "@/components/Back";
import Page from "@/components/Page";
import { Button, Divider } from "vant";
import { defineComponent } from "vue";
import style from "./index.module.less";
import defaultImg from "./assets/default.png";
import qrImg from "./assets/qr.png";
import saveIcon from "./assets/saveIcon.png";
import RoundInfo from "@/components/RoundInfo";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import RowView from "@/components/RowView";
import RoundImg from "@/components/RoundImg";
import TextGroups from "@/components/TextGroups";
import TitleView from "@/components/TitleView";
export default defineComponent({
  setup(props, {}) {
    const renderUserInfo = () => {
      const data: ITextGroupPropsData[] = [
        {
          name: "种植品种",
          value: "水果番茄",
          width: "100%",
        },
        {
          name: "",
          value: "镇海区九龙湖镇田顾工业区",
          width: "100%",
        },
      ];
      return (
        <RowView class="!items-start">
          <RoundImg
            class={"w-[70px] h-[70px] !rounded-8 mt-5"}
            src={"https://qfile.nongqibang.com/1675918606303_574.jpeg"}
          />
          <div class="ml-[8px] flex-1 flex-col flex round-right ">
            <TitleView title={"xxxxx"} maxLength={9} />
            <TextGroups data={data} />
          </div>
        </RowView>
      );
    };
    const render2 = () => {
      return (
        <div
          class={
            "flex flex-col items-center justify-center !mt-[30px] mb-[20px]"
          }
        >
          <img
            src={saveIcon}
            alt=""
            class={["w-[50px] h-[50px]", style["saveImg"]]}
          />
          <p class={["mt-5", style["savetext"]]}>保存到相册</p>
        </div>
      );
    };
    return () => {
      return (
        <div class={["overflow-y-auto", style["index"]]}>
          <Back text="我的共富码" />
          <div class={["m-14 mt-10 bg-white", style["box"]]}>
            {renderUserInfo()}
            <Divider />
            <img
              src={qrImg}
              alt=""
              class={["w-[250px] h-[225px]", style["qrImg"]]}
            />
          </div>
          {render2()}
        </div>
      );
    };
  },
});
